<template>

  <div class=" paggs">
    <!-- 头部导航++++++++++++++++++++++ -->
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <!-- 头部导航=============== -->

    <div class="mt_24">

      <el-row type="flex" justify="center">



        <el-col :span="24">
          <div class="info">

            <div style="margin-left: 80px;">
              <div class="f_30 f_bold">个人认证</div>
            </div>


            <!-- 进度条+++++++ -->
            <div class="center">
              <div class=" flex-col mt_30">
                <div class=" flex-row">
                  <!-- 第一步++++ -->
                  <div class="text-wrapper_2 flex-col ">
                    <span class="text_9 center">1</span>
                  </div>
                  <span class="text_10 ce">基础信息填写</span>
                  <div class="group_3 flex-col"></div>

                  <!-- 第二步+++++ -->
                  <template v-if="ruleForm.audit_status==2 || ruleForm.audit_status==3">
                    <div class="text-wrapper_2 flex-col ">
                      <span class="text_9 center">2</span>
                    </div>
                    <span class="text_10 center   ml_5">平台审核</span>
                    <div class="group_3 flex-col"></div>
                  </template>

                  <template v-else>
                    <div class="text-wrapper_3 flex-col ">
                      <span class="text_9 center">2</span>
                    </div>
                    <span class="text_11 center   ml_5">平台审核</span>
                    <div class="group_4 flex-col"></div>
                  </template>

                  <!-- 第三步++++++ -->
                  <template v-if=" ruleForm.audit_status==3">
                    <div class="text-wrapper_2 flex-col">
                      <span class="text_13 center">3</span>
                    </div>
                    <span class="text_10 center">认证成功</span>
                  </template>

                  <template v-else>
                    <div class="text-wrapper_4 flex-col">
                      <span class="text_13 center">3</span>
                    </div>
                    <span class="text_14 center">认证成功</span>
                  </template>
                  <!-- 第三步================ -->

                </div>
              </div>
            </div>

            <!-- 进度条======== -->
            <div class="center mt_70">
              <div class=" bg-purple1">
                <div class="f_22 f_bold p_30">


                  <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                    <el-form-item label="身份证号码" prop="id_card">
                      <el-input placeholder="请输入身份证号码" v-model="ruleForm.id_card"></el-input>
                    </el-form-item>

                    <el-form-item label="真实姓名" prop="real_name">
                      <el-input placeholder="请输入真实姓名" v-model="ruleForm.real_name"></el-input>
                    </el-form-item>




                    <el-form-item label="开户银行(用于结算开发者利润分成)" prop="open_bank_class_id">
                      <el-select style="width: 100%;" v-model="ruleForm.open_bank_class_id" placeholder="请输入开户银行">
                        <el-option v-for="(item,index) of bank_class_list" :key="index" :label="item.name" :value="item.id">{{item.name}}</el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="银行卡号" prop="card_number">
                      <el-input placeholder="请输入银行卡号" v-model="ruleForm.card_number"></el-input>
                    </el-form-item>


                    <el-form-item label="身份证正面" prop="identity_front">
                      <el-upload :action="upload_url" :on-success="handleFileSuccess" :show-file-list="false" class="avatar-uploader">
                        <img style="width: 100px;height: 100px;" v-if="ruleForm.identity_front" :src="ruleForm.identity_front" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>

                    <el-form-item label="身份证背面" prop="identity_back">
                      <el-upload :action="upload_url" :on-success="handleFileSuccessBack" :show-file-list="false" class="avatar-uploader">
                        <img style="width: 100px;height: 100px;" v-if="ruleForm.identity_back" :src="ruleForm.identity_back" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>


                    <!--              <el-form-item label="认证视频" prop="auth_video">
                      <div style="margin-top: -10px;color: #3FC1C9;">录制说明:</div>
                      <div class="smwz">1、电脑或者手机打开百度，获取当前时间</div>
                      <div class="smwz">2、录制内容:我是张三，提供的资料真实，现申请成为比奇开发者平台的开发者</div>
                      <div class="smwz">3、录制的视频要求清楚、严格按照格式提交</div>
                      <el-upload :action="upload_url" :on-success="handleLogSuccessZsf" :show-file-list="false" accept=".mp4" class="avatar-uploader">

                        <video style="width: 200px;" v-if="ruleForm.auth_video" controls>
                          <source :src="ruleForm.auth_video" type="video/mp4">
                        </video>

                        <i v-else class="el-icon-plus avatar-uploader-icon"> </i>

                      </el-upload>
                    </el-form-item> -->


                    <el-form-item class="center" v-if="ruleForm.audit_status !=3">
                      <el-button style="width: 100px;height:42px;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                      <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    </el-form-item>
                  </el-form>

                </div>
              </div>
            </div>

          </div>

        </el-col>
      </el-row>

    </div>

    <div v-if="dialogVisible" class="modal">
      <div class="modal-content column center">
        <img src="../../assets/images/rzkfz.png" />
        <div class="rzkfz center">{{zttswz}}</div>
        <div class="ljfh cursor" @click="ljfh">立即返回</div>
      </div>
    </div>

  </div>


</template>

<script>
  import Navvz from "@/components/Navvz";
  import * as User from "@/api/system/user";
  import Sidebartss from "@/components/Sidebartss";

  export default {
    components: {
      Navvz,
      Sidebartss
    },
    data() {
      return {
        zttswz: null,
        dialogVisible: false,
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        bank_class_list: [],
        ruleForm: {
          id_card: '', //身份证号
          real_name: '', //真实姓名
          open_bank_class_id: '', //开户行
          card_number: '', //银行卡号
          auth_video: '',
          identity_front: '',
          identity_back: '',
        },

        rules: {
          id_card: [{
              required: true,
              message: '请输入身份证号',
              trigger: 'blur'
            },
            // {
            //   min: 3,
            //   max: 5,
            //   message: '长度在 3 到 5 个字符',
            //   trigger: 'blur'
            // }
          ],
          real_name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }, ],
          open_bank_class_id: [{
            required: true,
            message: '请选择开户行',
            trigger: 'blur'
          }, ],
          card_number: [{
            required: true,
            message: '请输入银行卡号',
            trigger: 'blur'
          }, ],

          identity_front: [{
            required: true,
            message: '身分证正面不能为空',
            trigger: 'blur'
          }, ],

          identity_back: [{
            required: true,
            message: '身分证背面不能为空',
            trigger: 'blur'
          }, ],

          // auth_video: [{
          //   required: true,
          //   message: '认证视频不能为空',
          //   trigger: 'blur'
          // }, ],

        }

      }
    },
    created() {

      this.getUserInfo(); //查询用户详情
      // this.getUserBank(); //查询用户银行卡

      this.getBankClassList(); //查询银行卡分类列表

      this.audit_status = localStorage.getItem('audit_status'); //审核状态，1：未提交，2：已提交 3：审核通过 4：审核失败

      if (this.audit_status != 3) {

        if (this.audit_status == 1) {
          this.zttswz = "认证开发者，体验更多功能，获取更多支持..."
        }
        if (this.audit_status == 2) {
          this.zttswz = "管理员审核中，请等待..."
        }

        if (this.audit_status == 4) {
          this.zttswz = "审核失败，请重新填写资料..."
        }


        setTimeout(() => {
          this.dialogVisible = true;
        }, 300); // 延迟3秒，即3000毫秒
      }


    },
    methods: {
      ljfh() {
        this.dialogVisible = false;
      },
      handleClose() {
        this.dialogVisible = false
      },
      //身份证正面
      handleFileSuccess(res) {
        this.ruleForm.identity_front = res.data;
      },

      //身份证背面
      handleFileSuccessBack(res) {
        this.ruleForm.identity_back = res.data;
      },



      /****上传视频*****/
      handleLogSuccessZsf(res) {
        this.$set(this.ruleForm, 'auth_video', res.data);
      },
      /**查询用户详情 */
      getUserInfo() {
        //audit_status 1：未提交，2：已提交 3：审核通过 4：审核失败'
        this.loading = true;
        User.getUserInfo().then(response => {

          this.ruleForm.id_card = response.data.id_card
          this.ruleForm.audit_status = response.data.audit_status

          this.ruleForm.real_name = response.data.real_name
          this.ruleForm.auth_video = response.data.auth_video
          this.ruleForm.identity_front = response.data.identity_front
          this.ruleForm.identity_back = response.data.identity_back
          this.ruleForm.card_number = response.data.card_number
          this.ruleForm.open_bank_class_id = response.data.class_id
          console.log('用户详情', response.data)
          this.loading = false;
        });
      },

      /**查询银行卡分类列表 */
      getBankClassList() {

        this.loading = true;
        User.getBankClassList().then(response => {

          // this.ruleForm.id_card = response.data.id_card
          this.bank_class_list = response.data.rows
          console.log('银行卡分类列表', this.bank_class_list)
          this.loading = false;
        });
      },


      /**查询用户银行卡 */
      getUserBank() {

        this.loading = true;
        User.getUserBank().then(response => {
          this.ruleForm.open_bank_class_id = response.data.class_id
          this.ruleForm.card_number = response.data.card_number
          console.log('银行卡', response.data)
          this.loading = false;
        });
      },

      toUrl(url) {
        this.$router.push({
          path: url
        })
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            User.submitAc(this.ruleForm).then(response => {
              this.$modal.msgSuccess("提交人个认证成功");
              this.toUrl('/center')
            });

          } else {
            this.$modal.msgError("请补全资料，再提交认证！");
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },




    }
  };
</script>
<style scoped lang="scss">
  .paggs {
    background: #f4f6f9;
    height: 100%;
  }

  .info {
    background: #FFFFFF;
    border-radius: 10px;
    margin-right: 15px;
    margin-left: 15px;
    padding-top: 20px;
    min-height: 1350px;
  }

  .bg-purple1 {
    width: 690px;
    height: 514px;
    background: #FFFFFF;
    border-radius: 10px;
  }

  .text-wrapper_2 {
    background-color: #3FC1C9;
    border-radius: 50%;
    height: 28px;
    width: 28px;
    margin-left: 20px;
  }

  .text_9 {
    width: 8px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 8px 0 0 10px;
  }

  .text_10 {
    width: 107px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 6px 0 0 8px;
  }

  .group_3 {
    background-color: rgba(26, 130, 251, 1);
    width: 153px;
    height: 2px;
    margin: 15px 0 0 18px;
  }

  .group_4 {
    background-color: rgba(150, 149, 149, 1);
    width: 153px;
    height: 2px;
    margin: 15px 0 0 18px;
  }

  .text-wrapper_3 {
    background-color: rgba(150, 149, 149, 1);
    border-radius: 50%;
    height: 28px;
    margin-left: 19px;
    width: 28px;
  }

  .text_11 {
    width: 9px;
    height: 14px;
    overflow-wrap: break-word;
    color: #969595;
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 8px 30px 0 45px;
  }

  .text-wrapper_4 {
    background-color: rgba(150, 149, 149, 1);
    border-radius: 50%;
    height: 28px;
    margin-left: 24px;
    width: 28px;
  }

  .text_13 {
    width: 10px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 8px 0 0 9px;
  }

  .text_14 {
    width: 71px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(150, 149, 149, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 7px 0 0 8px;
  }

  .avatar-uploader-icon {
    font-size: 30px;
    color: #000000;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #f4f4f5;
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    // background-color: #fff;
    padding: 20px;
  }

  .modal-content img {
    max-width: 100%;
    height: auto;
    width: 298px;
    height: 256px;
  }

  .rzkfz {
    margin-top: 60px;
    width: 600px;
    height: 56px;
    background: #3FC1C9;
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;

  }

  .ljfh {
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 30px;
  }

  .smwz {
    color: #3FC1C9;
  }

  ::v-deep .el-form-item--medium .el-form-item__content {
    line-height: 25px;
  }

  ::v-deep .el-form-item__label {
    font-size: 16px;
  }

  ::v-deep .el-input__inner {
    border: 1px solid #F4F4F5;
  }

  ::v-deep .el-input--medium .el-input__inner {
    background: #F4F4F5;
  }
</style>
